<?php


namespace ColibriWP\Theme\Customizer\Controls;

abstract class VueControl extends ColibriControl {

    protected $inline_content_template = false;

    final protected function printVueMountPoint() {
        ?>
        <div class="sidebar-container" data-name="vue-mount-point">
            <?php $this->printVueContent(); ?>
        </div>
        <?php
    }

    public function json() {
        $json                            = parent::json();
        $json['inline_content_template'] = $this->getParam(
            'inline_content_template',
            false
        );

        return $json;
    }

    protected function content_template() {
        ?>
        <# if(data.inline_content_template) { #>
        <?php $this->printInlineContentTemplate(); ?>
        <# } else { #>
        <?php $this->printDefaultContentTemplate(); ?>
        <# } #>

        <div class="customize-control-notifications-container"></div>
        <?php
    }


    protected function printInlineContentTemplate() {
        ?>
        <div class="inline-elements-container">
            <div class="inline-element">
                <# if ( data.label ) { #>
                <span class="customize-control-title">{{{ data.label }}}</span>
                <# } #>
            </div>
            <div class="inline-element fit">
                <?php $this->printVueMountPoint(); ?>
            </div>
        </div>

        <# if ( data.description ) { #>
        <span class="description customize-control-description">{{{ data.description }}}</span>
        <# } #>
        <?php
    }

    protected function printDefaultContentTemplate() {
        ?>

        <# if ( data.label ) { #>
        <span class="customize-control-title">{{{ data.label }}}</span>
        <# } #>
        <div>
            <?php $this->printVueMountPoint(); ?>
        </div>


        <# if ( data.description ) { #>
        <span class="description customize-control-description">{{{ data.description }}}</span>
        <# } #>
        <?php
    }

    abstract protected function printVueContent();

    protected function vueEcho( $to_echo ) {
        echo '${ ' . $to_echo . ' }';
    }

    protected function render() {
    }
}